<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 95vh;
      display: grid;
      place-items: center;
      background: black;
    }

    .flame-box {
      height: 60px;
      width: 60px;
      transform-origin: center bottom;
      animation: flicker 3ms 200ms ease-in infinite alternate;
    }

    .flame {
      bottom: 0;
      position: absolute;
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
      transform: rotate(-45deg) scale(1.5, 1.5);
    }

    .yellow {
      height: 30px;
      width: 30px;
      left: 15px;
      background: #ffd700;
      box-shadow: 0px 0px 9px 4px #ffd700;
    }

    .orange {
      left: 10px;
      width: 40px;
      height: 40px;
      background: #ffa500;
      box-shadow: 0px 0px 9px 4px #ffa500;
    }

    .red {
      height: 50px;
      width: 50px;
      left: 5px;
      background: #ff4500;
      box-shadow: 0px 0px 5px 4px #ff4500;
    }

    .white {
      height: 30px;
      width: 30px;
      left: 15px;
      bottom: -4px;
      background: #ffffff;
      box-shadow: 0px 0px 9px 4px #ffffff;
    }

    .circle {
      border-radius: 50%;
      position: absolute;
    }

    .blue {
      left: 25px;
      bottom: -25px;
      width: 10px;
      height: 10px;
      background: #6a5acd;
      box-shadow: 0px 0px 15px 10px #6a5acd;
    }

    .black {
      left: 10px;
      bottom: -60px;
      width: 40px;
      height: 40px;
      background: #000000;
      box-shadow: 0px 0px 15px 10px #000000;
    }

    @keyframes flicker {
      0% {
        transform: rotate(-1deg);
      }

      20% {
        transform: rotate(1deg);
      }

      40% {
        transform: rotate(-1deg);
      }

      60% {
        transform: rotate(1deg) scaleY(1.04);
      }

      80% {
        transform: rotate(-2deg) scaleY(0.92);
      }

      100% {
        transform: rotate(1deg);
      }
    }
  </style>
</head>

<body>
  <div class="flame-box">
    <div class="red flame"></div>
    <div class="orange flame"></div>
    <div class="yellow flame"></div>
    <div class="white flame"></div>
    <div class="blue circle"></div>
    <div class="black circle"></div>
  </div>
</body>

</html>